<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-button class='base_btn' @click="orderChangeStatus" v-if='type == 1' size='mini' type='primary'>订单对账</el-button>
    <el-button class='base_btn' :disabled='true' v-if='type == 2' size='mini' type='danager'>已标记对账</el-button>
    <el-row class="base_info">
      <el-col :span='3'><span>结算时间:</span></el-col>
      <el-col :span='9'>
        <p>{{ detail.settleTime }}</p>
      </el-col>
      <!-- <el-col :span='3'><span>收入类型:</span></el-col>
      <el-col :span='9'>
        <p v-if="detail.orderType == 1">订单入账 </p>
        <p v-if="detail.orderType == 5">拼团退还 </p>
      </el-col> -->
    </el-row>
    <el-row class="base_info">
      <el-col :span='3'><span>订单类型:</span></el-col>
      <el-col :span='9'>
        <p>{{ detail.orderTypeText }}</p>
        <!-- <p v-if='detail.type == 5'>现金券</p>
        <p v-if='detail.type == 10'>拼团</p>
        <p v-if='detail.type == 15'>会员专享商品</p>
        <p v-if='detail.type == 20'>优惠买单</p>
        <p v-if='detail.type == 25'>普通商品</p> -->
      </el-col>
      <el-col :span='3'><span>所属小店:</span></el-col>
      <el-col :span='9'>
        <p>{{ detail.sellerName }}</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span='3'><span>支付单号:</span></el-col>
      <el-col :span='9'>
        <p v-if='detail.orderNo'>{{ detail.orderNo }}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span='3'><span>收支流水号:</span></el-col>
      <el-col :span='9'>
        <p v-if='detail.paySn'>{{ detail.paySn }}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>

    <el-row class="base_info">
      <!-- <el-col :span='3'><span>付款账号:</span></el-col>
      <el-col :span='9'>
        <p v-if='detail.payAccount'>{{ detail.payAccount }}</p>
        <p v-else>---</p>
      </el-col> -->
      <el-col :span='3'><span>支付渠道:</span></el-col>
      <el-col :span='9'>
        <p>{{ detail.payMethodName }}</p>
        <!-- <p v-if='order_info.pay_method ==5'>支付宝支付</p>
          <p v-if='order_info.pay_method ==10'>微信支付（APP）</p> -->
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span='3'><span>流水金额:</span></el-col>
      <el-col :span='9'>
        <p v-if='detail.shopCommission'>¥ {{ detail.shopCommission }}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span='3'><span>收入金额:</span></el-col>
      <el-col :span='9'>
        <p v-if='detail.shopCommission'>{{ detail.shopCommission }}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>

    <p class="title">| 订单信息</p>
    <div class="order_infomation">
      <el-table :data="tableData" style="width:100%" max-height="680" :cell-style="tc" :header-cell-style="tccolor">
        <el-table-column label="商品ID" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop='title'></el-table-column>
        <el-table-column label="购买数量" prop='quantity'></el-table-column>
        <el-table-column label="订单金额" prop='amount'></el-table-column>
        <!-- <el-table-column label="状态" prop='statusText'></el-table-column> -->
      </el-table>
    </div>

    <div class="class_btn">
      <el-button size='mini' type="primary" @click="handleCancel">确定</el-button>
      <el-button size='mini' type="danager" @click="handleCancel">取消</el-button>
    </div>

  </div>
</template>

<script>
import { transactionDetail } from '@/api/order'
import { orderDetail } from "@/api/order"
export default {
  name: 'record_detail',
  props: ['visible', 'currentId', 'type', 'shopName'],
  data() {
    return {
      detail: {},
      order_info: {},
      username: {},
      tableData: [],
    }
  },
  watch: {
    visible(newValue) {
      if (newValue) {
        console.log('显示值改变')
        this.getRecordDetailData()
      }
    }
  },
  methods: {
    orderChangeStatu() {
      console.log('修改状态')

    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
      this.$emit('func')
    },
    async getRecordDetailData() {
      let res = await transactionDetail(this.currentId);
      if (res.code === 200) {
        console.log(res.data)
        this.detail = res.data
        this.order_info = res.data
        this.username = res.data.username
        this.tableData = res.data.products
        // console.log(res.data, '$$$$$$$$$$$$$$$$$$$$$$$')
        // if(this.detail.order_product){
        //   this.tableData.push(this.detail.order_product)
        // }

      } else {
        this.$message.error(res.message)
      }

    }
  }
};
</script>


<style scoped lang="scss">
.detail_content {
  padding: 20px;

  .title {
    font-size: 16px;
  }

  .base_btn {
    float: right;
  }

  .base_info {
    margin: 15px 20px 20px;

    span {
      font-size: 12px;
      color: #999999;
    }

    p {
      font-size: 13px;
      color: #333333;
    }
  }

  .order_infomation {
    margin-top: 16px;
  }

  .class_btn {
    margin-top: 30px;
    text-align: center;
  }
}
</style>
